<script setup lang="ts">
import { reactive } from 'vue'
import { useRoute, useRouter } from "vue-router"
import { useStore } from '../store'
import { get } from '../utils/request'
import XLSX, { utils } from 'xlsx'
import { dayjs } from 'element-plus'
const state = reactive({
  data: [],
  dict: {}
})

const router = useRouter()
const store = useStore()

const out = () => {
  let data = []
  let item = {}
  for (let i in state.data) {
    item = {
      '班级': state.data[i]['class'],
      '姓名': state.data[i]['name'],
      '性别': state.data[i]['gender'],
      '电话': state.data[i]['phone'],
      '证件号码': state.data[i]['cardNo'],
      '过敏物': state.data[i]['allergy'],
      '紧急电话': state.data[i]['mobile'],
      '填报时间': state.data[i]['inputTime'],
    }
    data.push(item)
  }
  
  let wb = XLSX.utils.book_new()
  let sheet = XLSX.utils.json_to_sheet(data)
  XLSX.utils.book_append_sheet(wb, sheet, 'sheet1')
  XLSX.writeFile(wb, '研学报名导出数据'+dayjs().format("YYYYMMDDHHmmss") + '.xlsx')
}

const init = () => {
  get('trip', {admin: 1}).then(res => {
    for (let i in res.data.data) {
      state.data.push(res.data.data[i])
    }
  }).catch(() => {
    alert('出错了')
  })
}

init()
document.title = "研学报名"
</script>

<template>
<div>
  数量： {{ state.data.length }} &nbsp; <el-button @click="out">导出</el-button>
  <el-table :data="state.data" style="width: 100%">
    <el-table-column prop="class" label="班级" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="gender" label="性别" />
    <el-table-column prop="phone" label="学生电话" />
    <el-table-column prop="cardNo" label="证件号码" />
    <el-table-column prop="mobile" label="紧急电话" />
    <el-table-column prop="allergy" label="过敏物" />
    <el-table-column prop="inputTime" label="填报时间" />
  </el-table>
</div>
</template>